<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <title>Document</title>
    <style>
        input {
            margin-bottom: 10px;
        }
        form {
            margin-left: 15px;
        }
    </style>
</head>
<body>
        <h3>登录页面</h3>
        <label for="name">用户名：</label><input type="text" name="username" id="name"><br>
        <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="password" id="pwd"><br>
        <button class="btn btn-default" type="submit">登录</button>
    <script>
        // http://localhost/login
        const ipts = document.querySelectorAll('input')
        const btn = document.querySelector('button')
        btn.onclick = function(){
            let xhr = new XMLHttpRequest()
            let username = ipts[0].value
            let password = ipts[1].value
            console.log(username,password);
            xhr.open('POST','http://localhost/login')
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            xhr.send(`username=${username}&&password=${password}`)
            xhr.onreadystatechange = function(){
                if(xhr.readyState ==4&&xhr.status ==200){
                    let result = xhr.responseText
                    console.log(result);
                    if(result =='登录失败,您输入的用户名或密码有误'){
                        alert('账号或者密码错误')
                    }else{
                        window.location.href = 'http://localhost'
                    }
                }
            }
        }
    </script>
</body>
</html>